<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Friend Demo for Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/init.css">
    <link rel="shortcut icon" href="./images/index.jpg" type="image/x-icon" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <!-- <link href="https://cdn.bootcss.com/bootstrap-table/1.12.2/bootstrap-table.css" rel="stylesheet"> -->
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="container">
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="editModalLabel">修改用户信息</h4>
                    </div>
                    <form accept-charset="utf-8">
                        <div class="modal-body">
                            <div class="input-group">
                                <span class="input-group-addon">用户ID：</span>
                                <input type="text" readonly class="form-control" name="editId">
                            </div></br>
                            <div class="input-group">
                                <span class="input-group-addon">用户名：</span>
                                <input type="text" class="form-control" name="editName">
                            </div></br>
                            <div class="input-group">
                                <span class="input-group-addon">密&nbsp;&nbsp;&nbsp;码：</span>
                                <input type="text" class="form-control" name="editPasswd">
                            </div></br>
                            <div class="input-group">
                                <span class="input-group-addon">公&nbsp;&nbsp;&nbsp;司：</span>
                                <input type="text" class="form-control" name="editCompany">
                            </div></br>
                            <div class="input-group">
                                <span class="input-group-addon">年&nbsp;&nbsp;&nbsp;龄：</span>
                                <input type="text" class="form-control" name="editAge">
                            </div></br>
                            <div class="input-group">
                                <!--  <span class="input-group-addon">性&nbsp;&nbsp;&nbsp;别：</span>
                                <input type="text"  class="form-control" name="editSex"> -->
                                <span class="input-group-addon">性&nbsp;&nbsp;&nbsp;别：</span>
                                <label>男<input type="radio" checked name="editSex" value="1"></label>
                                <label>女<input type="radio" name="editSex" value="0"></label>
                            </div>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-default editBtn">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="addodalLabel">添加用户信息</h4>
                    </div>
                    <form accept-charset="utf-8">
                        <div class="modal-body">
                            <div class="input-group">
                                <span class="input-group-addon">用户ID：</span>
                                <input type="text" class="form-control" name="addId">
                            </div></br>
                            <div class="input-group">
                                <span class="input-group-addon">用户名：</span>
                                <input type="text" class="form-control" name="addName">
                            </div></br>
                            <div class="input-group">
                                <span class="input-group-addon">密&nbsp;&nbsp;&nbsp;码：</span>
                                <input type="text" class="form-control" name="addPasswd">
                            </div></br>
                            <div class="input-group">
                                <span class="input-group-addon">公&nbsp;&nbsp;&nbsp;司：</span>
                                <input type="text" class="form-control" name="addCompany">
                            </div></br>
                            <div class="input-group">
                                <span class="input-group-addon">年&nbsp;&nbsp;&nbsp;龄：</span>
                                <input type="text" class="form-control" name="addAge">
                            </div></br>
                            <div class="input-group">
                                <span class="input-group-addon">性&nbsp;&nbsp;&nbsp;别：</span>
                                <!-- <input type="text" class="form-control" name="addSex"> -->
                                <label>男<input type="radio" checked name="addSex" value="1"></label>
                                <label>女<input type="radio" name="addSex" value="0"></label>
                            </div>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-default delBtn" id="addSubmit">添加</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="">
            <div class="searchBox">
                <input type="text" placeholder="请输入要查找的ID" class="search">
                <button class="searchBtn">查找</button>
            </div>
            <table class="table table-bordered table-striped table-hover" align="center" id="myTab">
                <caption class="h4">用户信息表</caption>
                <thead align="center">
                    <tr>
                        <th width="15%">用户ID</th>
                        <th width="15%">用户名</th>
                        <th width="20%">密码</th>
                        <th width="20%">公司</th>
                        <th width="5%">年龄</th>
                        <th width="10%">性别</th>
                        <th width="15%" colspan="3">操作</th>
                    </tr>
                </thead>
                <tbody id="tb" align="center">
                </tbody>
            </table>
            <div class="t_tool">
                <span class="iconfont icon-fenye-diyiye first"></span>
                <span class="iconfont icon-fenye-shangyiye pre"></span>
                <input class="nowPage" type="text" disabled name="" value="1">
                <span class="iconfont icon-fenye-xiayiye next"></span>
                <span class="iconfont icon-fenye-zuihouyiye last"></span>
                <span>共</span>
                <span class="allPage"></span>
                <span>页</span>
                <span class="allCount"></span>
                <span>条数据</span>
                <input class="toPage" type="text" name="" value="1">
                <button class="toBtn">跳转</button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <!-- <script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/bootstrap-table.js"></script> -->
    <script type="text/javascript" src="./js/index.js"></script>
</body>

</html>